<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom事件流</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 0 auto;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<script>
    // father盒子包含了son盒子，最后执行结果也是先弹出父亲的窗口再弹出儿子的窗口，
    // 前提是父亲儿子都要处于捕获阶段（true）
    // var son = document.querySelector('.son')
    // var father = document.querySelector('.father')
    // son.addEventListener('click',function(){
    //     alert('son')
    // },true)
    // father.addEventListener('click',function(){
    //     alert('father')
    // },true)
    // father盒子包含了son盒子，document包含了father，最后执行结果也是先弹出儿子的窗口再弹出父亲的窗口，最后document，
    // 前提是父亲儿子document都要处于冒泡阶段（false或者空白）
    // 阻止事件冒泡（面试）
// 标准写法：事件对象里面的stopPropagation()方法
// 儿子添加了阻止冒泡，点击儿子儿子会弹出，但是父亲和document都不会弹出，
// 点击父亲就会继续冒出父亲和document。
    var son = document.querySelector('.son')
    var father = document.querySelector('.father')
    son.addEventListener('click',function(e){
        alert('son')
        e.stopPropagation()//标准
        e.cancelBubble=true//非标准
    },false)
    father.addEventListener('click',function(){
        alert('father')
    },false)
    document.addEventListener('click',function(){
        alert('document')
    })
</script>
<!-- 
    dom事件流分为3个阶段
    1.捕获阶段
    2.当前的目标阶段
    3.冒泡阶段
    js代码中只能执行冒泡或捕获的其中一个阶段
    onclick,attachEvent只能到冒泡阶段
    eventTarget.addEventListener(type,listener[,useCapture])
    如果第三个参数是true则是在捕获阶段 如果是false则是在冒泡阶段
 -->
</html>